<template>
	<div id="mainIndex">
		<div class="page__bd">
			<div class="weui-tab">
				<div class="weui-tab__panel">
					<div class="weui-tab__panel_top">
						<div class="weui-tab__panel_top_left">
							<p>Skyeye</p>
						</div>
						<div class="weui-tab__panel_top_right">
							<el-dropdown :hide-on-click="false">
								<span class="sel">+</span>
								<el-dropdown-menu slot="dropdown" class="down_1">
									<el-dropdown-item><img src="../../assets/img/sao.png" class="down_1_1" />扫一扫</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/screens.png" class="down_1_1" />投屏</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/chat.png" class="down_1_1" />发起群聊</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/add.png" class="down_1_1" />添加好友</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/postcard.png" class="down_1_1" />交换名片</el-dropdown-item>
									<el-dropdown-item><img src="../../assets/img/wait.png" class="down_1_1" />待阅待办</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>
						</div>
					</div>
					<div class="weui-tab__panel_search">
						<input class="weui-tab__panel_search_inp" type="text" placeholder="搜索" />
						<i class="weui-icon-search"></i>
					</div>
					<div class="weui-tab__panel_bd">
						<v-refresh :on-refresh="onRefresh">
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="RemainDone" class="router_1">待办待阅</router-link>
										</p>
										<p class="weui-media-box__desc">
											<span class="span_1">待处理:</span>
											<span class="span_1">审批</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
											<span class="span_1">日程</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
											<span class="span_1">任务</span>
											<span class="span_1">(</span>
											<span class="span_2">1</span>
											<span class="span_1">)</span>
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Emails" class="router_1">我的邮件</router-link>
										</p>
										<p class="weui-media-box__desc">
											小明本周工作周报
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Personnel" class="router_1">人事部</router-link>
										</p>
										<p class="weui-media-box__desc">
											今晚一起聚个餐
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="Talk" class="router_1">OA讨论组</router-link>
										</p>
										<p class="weui-media-box__desc">
											这个功能还需要调整一下
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>

							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
							<div class="weui-panel__bd">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" alt="" src="">
									</div>
									<div class="refreshText_center">
										<p>
											<router-link to="People" class="router_1">小明</router-link>
										</p>
										<p class="weui-media-box__desc">
											明天请个假
										</p>
									</div>
									<div class="refreshText_right">
										<span class="weui-badge_1">2</span>
									</div>
								</a>
							</div>
						</v-refresh>
					</div>

				</div>
				<div class="weui-tabbar">
					<PublicFoot></PublicFoot>
				</div>
			</div>
		</div>
	</div>

</template>

<script>
	import DropDownRefresh from '@/components/publics/DropDownRefresh'
	import PublicFoot from '@/components/publics/PublicFoot'
	export default {
		name: 'mainIndex',
		data() {
			return {

			}
		},
		mounted() {
				this.getStartPullUpState()
				this.getPullUpDefData()

			},
		methods: {
			
			onRefresh(done) {
				this.getStartPullUpState(),
					this.getPullUpDefData()
				done()
			},
			// 获取上拉加载的初始数据
			getPullUpDefData() {
//				this.infiniteLoadData.pullUpList = []
//				for(let i = 0; i < this.infiniteLoadData.initialShowNum; i++) {
//					this.infiniteLoadData.pullUpList.push(this.card_list[i])
//				}
			},

			getStartPullUpState() {
//				if(this.list.length === this.infiniteLoadData.initialShowNum) {
//					// 修改子组件的pullUpState状态
//					this.infiniteLoadData.pullUpState = 3
//				} else {
//					this.infiniteLoadData.pullUpState = 0
//				}
			},
		},
		components: {
			PublicFoot,
			'v-refresh': DropDownRefresh
		}
	}
</script>

<style scoped="scoped">
	#mainIndex {
		width: 100%;
		height: 100%;
		background-color: white;
	}
	
	.down_1 {
		width: 1.2em;
		margin-left: 0.45rem;
	}
	
	.down_1_1 {
		width: 0.15rem;
		margin-right: 0.05rem;
		width: 12px;
    	height: 12px;
	}
	
	.weui-tab__panel_bd {
		width: 100%;
		height: calc(100% - 0.95rem);
		overflow-y: auto;
	}
	
	.refreshText_center {
		width: calc(100% - 90px);
	}
	
	.weui-media-box{
		padding: 0px 5px;
	    height: 100%;
	}
	
	.weui-media-box__desc {
	    font-size: 1em;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.weui-media-box_appmsg .weui-media-box__hd{
	    width: 3.9em;
	    height: 3.9em;
	    line-height: 3.9em;
	    margin: 0.3em;
	}
	
	.span_1 {
		font-size: 1em;
	}
	
	.span_2 {
		color: red;
		font-size: 1em;
	}
	
	.weui-panel__bd {
		border-bottom: 1px solid gainsboro;
	    margin: 0 10px;
    	width: calc(100% - 20px);
	    height: 4.5em;
	}
	
	.weui-media-box__hd .weui-media-box__thumb {
		width: 100%;
    	height: 100%;
	    border: 1px solid gainsboro;
    	border-radius: 25px;
	}
	
	.weui-media-box__hd img[src=""]{
		opacity:0;
	}
	
	.router_1 {
	    font-size: 1.1em;
	    color: black;
	}
	
	.weui-badge_1 {
		display: block;
	    width: 2em;
	    height: 2em;
	    line-height: 2em;
	    background-color: red;
	    border-radius: 1em;
	    text-align: center;
	    color: white;
	    font-size: 0.8em;
	    font-weight: 600;
	}
</style>